<template>
	<view class="page">
		<!-- <scroll-view scroll-y="" class="file-list" :style="{'height': screenHeight-80 +'px'}"> -->
		<uni-group title="视频文件">
			<view class="video-block" v-for="(item,index) in videoList" :key="index">
				<video class="video-item" :src="item.filePath" @click="openVideo(item)"></video>
				<button type="warn" class="delt-video" size="mini" @click="videoRemove(item)">删除</button>
			</view>

			<view class="" v-if="videoList.length == 0">
				无
			</view>
		</uni-group>
		<uni-group title="图片文件">
			<view class="file-block" @longpress="select(item,index)" v-for="(item,index) in imageList" :key=index
				@click="notSelect(item,index)">
				<image class="img-item" :src="item.filePath" mode="scaleToFill"></image>
				<text v-if="item.isSelect" class="iconfont iconxuanzhong"></text>
				<text v-if="isReady" class="iconfont iconweixuanzhong-01"></text>
			</view>
			<view class="" v-if="imageList.length == 0">
				无
			</view>
		</uni-group>
		<uni-group title="音频文件">
			<view class="music-block" v-for="(item,index) in musicList" :key="index">
				<audio controls :name="item.filePath.split('/').pop()" :src="item.filePath"></audio>
				<text class="iconfont iconziyuan1" @click="videoRemove(item)"></text>
			</view>
			<view class="" v-if="musicList.length == 0">
				无
			</view>
		</uni-group>
		<uni-group title="其他文件">
			<view class="other-block" v-for="(item,index) in otherList" :key="index">
				<text @click="openFile(item)">{{item.name}}</text><text <text @click="otherRemove(item)"
					class="iconfont iconziyuan1"></text>
			</view>
			<view class="" v-if="otherList.length == 0">
				无
			</view>
		</uni-group>
		<!-- </scroll-view> -->
		<button type="warn" class="delet-btn" v-if="deltList.length >0"
			@click="imageRemove">删除{{deltList.length}}项</button>
	</view>
</template>

<script>
	var _self

	export default {
		data() {
			return {
				screenHeight: uni.getSystemInfoSync().screenHeight,
				isReady: false,
				imageList: [],
				videoList: [],
				otherList: [],
				musicList: [],
				deltList: []
			}
		},
		onLoad() {
			_self = this
			this.init()
		},
		onShow() {

		},
		methods: {
			init() {
				this.imageList = []
				this.videoList = []
				this.otherList = []
				uni.getSavedFileList({
					success: function(res) {
						// console.log(res.fileList.length);
						if (res.fileList != null && res.fileList.length != 0) {
							res.fileList.forEach(fl => {
								if (_self.utils.imgsuffixList.indexOf(fl.filePath.split('.').pop()) !=
									-1) {
									fl.isSelect = false
									_self.imageList.push(fl)
								} else if (_self.utils.videosuffixList.indexOf(fl.filePath.split('.')
										.pop()) != -1) {
									// fl.filePath = "file:/"+plus.io.convertLocalFileSystemURL( fl.filePath )
									_self.videoList.push(fl)
								} else if (_self.utils.musicsuffixList.indexOf(fl.filePath.split('.')
										.pop()) != -1) {
									// fl.filePath = "file:/"+plus.io.convertLocalFileSystemURL( fl.filePath )
									console.log(fl)
									_self.musicList.push(fl)
								} else {
									var sps = plus.io.convertLocalFileSystemURL(fl.filePath).split('/')
									fl.name = sps.pop()
									_self.otherList.push(fl)
								}
							})
							// console.log("imageList",_self.imageList.length)
							// console.log("videoList",_self.videoList.length)
							// console.log("musicList",_self.musicList.length)
							// console.log("otherList",_self.otherList.length)
						}
					}
				});
				_self.deltList = []
				_self.isReady = false
			},
			select(item, index) {
				_self.isReady = true
				item.isSelect = true
				_self.deltList.push(item)
				_self.imageList.splice(index, 1, item)
				console.log(_self.deltList.length)
			},
			openFile(file) {
				uni.openDocument({
					filePath: file.filePath,
					success: function(res) {
						console.log('打开文档成功');
					}
				});
			},
			notSelect(item, index) {
				if (_self.isReady) {
					item.isSelect = !item.isSelect
					if (item.isSelect) {
						_self.deltList.push(item)
						_self.imageList.splice(index, 1, item)
					} else {
						_self.deltList.splice(_self.deltList.indexOf(item), 1)
						_self.imageList.splice(index, 1, item)
						if (_self.deltList.length == 0) {
							_self.isReady = false
						}
					}
				} else {
					// console.log("进来了"+_self.isReady)
					_self.priview(item)
				}

			},
			openVideo(file) {
				uni.openDocument({
					filePath: file.filePath,
				})
			},
			imageRemove() {
				_self.deltList.forEach(dl => {
					uni.removeSavedFile({
						filePath: dl.filePath,
						complete: function(res) {
							// console.log(res);
							_self.deltList.splice(_self.deltList.indexOf(dl))
							_self.imageList.splice(_self.imageList.indexOf(dl))
						}
					});
				})
				uni.showToast({
					icon: "none",
					title: "删除成功"
				})
				// _self.init()
			},
			videoRemove(file) {
				uni.removeSavedFile({
					filePath: file.filePath,
					complete: function(res) {
						_self.videoList.splice(_self.videoList.indexOf(file), 1)
						uni.showToast({
							icon: "none",
							title: "删除成功"
						})
						// console.log(res);
					}
				});

			},
			otherRemove(file) {
				uni.removeSavedFile({
					filePath: file.filePath,
					complete: function(res) {
						_self.otherList.splice(_self.otherList.indexOf(file), 1)
						uni.showToast({
							icon: "none",
							title: "删除成功"
						})
						// console.log(res);
					}
				});

			},
			priview(item) {
				// 预览图片
				var fl = []
				fl.push(item.filePath)
				uni.previewImage({
					urls: fl,
				});
			}
		}
	}
</script>

<style>
	@import url("history.css");
</style>
